@import '~styles/varibles'
ul,ol,dl,dd,h1,h2,h3,h4,h5,h6
  margin 0
  padding 0
.header-wrap
  position relative
  z-index: 100
  .header-div
    width 100%
    height 1.2rem
  .header
    width 100%
    height 1.2rem
    border-bottom .02rem solid #eee
    position: fixed
    background: $theme-background
    .container
      max-width 19.2rem
      margin auto
      display flex
      align-items center
      height 100%
      .logo
        font-size .56rem
        color $theme-color
        margin-right .48rem
        img 
          width 1rem
      .main-nav
        height 100%
        flex 1
        .nav-list
          height 100%
          display flex
          align-items center
          font-size .32rem
          .main-nav-list
            display flex
            position relative
            .phone-show-menu
              display none
              color $theme-color
              align-items center
              cursor pointer
              padding 0 .48rem
            .phone-show-menu:after
              content: '\e604'
              margin-left: .06rem
              font-size: .24rem
            .phone-hide
              display flex
          .nav-item
            padding 0 .30rem
            color #71777c
            height 1.2rem
            display flex
            align-items center
            position relative
            .language-title:after
              content '\e617'
            .language-dropdown
              z-index: 9
              overflow hidden
              position absolute
              top 1rem
              background $theme-background
              border-radius .1rem
              font-size .28rem
              line-height .6rem
              color #71777c
              transition: all .3s
              max-height: 0
              opacity 0
              .language-dropdown-item:hover
                color $theme-color
            &>a
              &:hover
                color $theme-color
              &:after
                content: ''
                position: absolute
                top: 0
                left: 0
                right: 0
                bottom: 0
            &.auth
              color: $theme-color
              padding-right 0
              cursor auto
              span
                cursor pointer
                &:hover
                  color #0371df
                &.login:after
                  content: '\e67c'
                  font-size: .24rem

          // .nav-item:hover
          //   .language-dropdown
          //     // display block
          //     max-height: 10rem
          //     border .02rem solid #eee
          //     padding 10px
          //     opacity 1
          .nav-item.search
            flex: 1
            cursor auto
            justify-content: flex-end
            .search-form
              display flex
              align-items: center
              background #f9fafb
              border: .02rem solid #e5e6e7
              border-radius: .06rem
              transition: all .2s
              .search-input
                width 1.92rem
                height 0.34rem
                padding: .14rem .24rem
                font-size: .26rem
                background-color: transparent
              .search-input::-webkit-input-placeholder /*WebKit browsers*/
                color: #aaa
              .search-input::-moz-input-placeholder /*Mozilla Firefox*/
                color: #aaa
              .search-input::-ms-input-placeholder /*Internet Explorer*/ 
                color: #aaa
              .search-btn
                font-size: .32rem
                padding: 0 .12rem
                // cursor: pointer
                cursor: not-allowed //功能未实现临时图标
                color: #ccc
                font-weight: bold
                transition: all .2s
            .search-form.active
              background: $theme-background
              border-color: $theme-color
              .search-btn
                color: $theme-color
          .nav-item.add
            cursor default
            .addArticle
              background: $theme-color
              color: $theme-background
              height .64rem
              border-radius: .06rem
              padding: 0 .2rem
              cursor pointer
          .nav-item.news span
            font-size: .4rem
          .nav-item.menu
            padding-right: 0
            cursor: pointer
            // &:hover
            //   .user-dropdown-list
            //     opacity 1
            //     max-height: 8rem
            //     border-width: .02rem
            //     overflow: visible
            .user-photo
              width 0.6rem
              height 0.6rem
              border-radius: 50%
              display: flex
              justify-content: center
              align-items: center
              font-size: .32rem
              border-radius: 50%
              overflow hidden
              cursor: pointer
              img
                width: 100%
            .nav-menu
              position: absolute
              width 3.12rem
              right: 0
              top: 100%
              background: $theme-background
              border: .02rem solid #ddd
              border-radius: .1rem
            .user-dropdown-list
              // display none
              .nav-menu-item-group
                padding: .24rem 0
                .nav-menu-item
                  font-size: .32rem
                  cursor pointer
                  position relative
                  .more-about
                    position: absolute
                    right: 100%
                    top: 0
                    max-height 0rem
                    width 0
                    opacity 0
                    transition: all .3s
                    border-width: 0
                    overflow hidden
                  &>a
                    color: #71777c
                    display: flex
                    padding: .12rem .24rem
                    align-items: center
                    .iconfont
                      color: #b2bac2
                      margin-right: .2rem
                      width .32rem
                      text-align center
                      font-size: .28rem
                    span 
                      flex-grow 1
                      line-height: .42rem
                      font-size: .30rem
                  &:hover
                    background: #f8f8f8
                  &.about:hover
                    .more-about
                      padding: .24rem 0
                      opacity 1
                      max-height: 3.4rem
                      width 3.12rem
                      border-width: .02rem
          



  @media only screen and (max-width: 980px)
    .header
      .container
        width 96%
        .logo
          margin-right 0
          margin-left: .2rem
        .main-nav .nav-list .main-nav-list .phone-show-menu
          display flex
          height 1.2rem
          background: $theme-background
        .main-nav .nav-list .main-nav-list .phone-hide
          // display none
          position absolute
          display none
          border .02rem solid #ddd
          border-radius .1rem
          top 100%
          transition: all .2s
          background $theme-background
        .main-nav .nav-list .main-nav-list .phone-hide.show
          display block
          .nav-item
            height .96rem
            width 1.4rem
            justify-content center
            .language-title:after
              content '\e673'
              font-size: .24rem
              margin-left: .1rem
            .language-dropdown
              max-height: 10rem
              border .02rem solid #eee
              padding 10px
              opacity 1
              top 0
              left 100%
  @media only screen and (max-width: 700px)
    .header .container .main-nav .nav-list .main-nav-list
      flex 1
    .header .container .main-nav .nav-list .nav-item.search
      display none
    .header .container .main-nav .nav-list .nav-item.add
      display none